<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="定长列表"
      :back-button="backButton"
      :right-buttons="rightButtons"
      @nav-bar-back-click="$dsxRouter.back()"
      @nav-bar-right-click="handleNavBarRightEv"
    ></hips-nav-bar>

    <hips-group>
      <hips-cell
        v-for="record in dsxRecords.data"
        :key="record.key"
        :title="record.get('userName')"
        :description="record.get('location')"
        @click="clickListContent(record)"
      >
      </hips-cell>
    </hips-group>
  </hips-view>
</template>

<script>
import { View, NavBar, Group, Cell, Icon, Button } from '@hips/vue-ui';
import Dsx from '@hips/plugin-dataset-vuex';

export default {
  name: 'limit-list',
  data() {
    const _this = this;
    const dsx = new Dsx({
      moduleName: 'limit-list',
      autoQuery: true,
      dataToJSON: 'changed',
      transport: {
        retrieve: '/user/limit-list',
      },
      events: {
        beforeQuery() {
          _this.$hips.indicator.show({
            text: '加载中',
          });
          return Promise.resolve(true);
        },
        loadSuccess() {
          _this.$hips.indicator.hide();
        },
      },
    });
    return {
      dsxRecords: dsx.records,
      backButton: {
        showLeftArrow: true,
      },
      rightButtons: [
        {
          buttonLabel: '新建',
        },
      ],
    };
  },
  components: {
    [View.name]: View,
    [NavBar.name]: NavBar,
    [Group.name]: Group,
    [Cell.name]: Cell,
    [Icon.name]: Icon,
    [Button.name]: Button,
  },
  methods: {
    clickListContent(record) {
      this.$dsxRouter.push({
        name: 'user-detail',
        params: {
          id: record.get('id'),
        },
      });
    },
    handleNavBarRightEv() {
      this.$dsxRouter.push({
        name: 'create-user',
      });
    },
    getRecordData() {
      this.dsx.records.select(0);

      this.dsx.records.at(1).remove();

      const data = this.dsx.records.at(0).toData();

      const json = this.dsx.records.at(0).toJSON();
      console.log('data = ', JSON.stringify(data));
      console.log('json = ', json);
    },

    getRecordsData() {
      const data = this.dsx.records.toData();

      const json = this.dsx.records.toJSON();
      console.log('data = ', data);
      console.log('json = ', json);
    },
  },
};
</script>

<style scoped></style>
